<template>
    <div class="runErrandContent">

        <uni-popup ref="bottomPopupRef0" type="bottom" class="bottomPopup bottomPopupRef0">

            <div class="billingTemplate costDesc">
                <div class="content" style="padding-bottom: 140rpx;">

                    <div class="head">
                        <div class="titile">
                            运费预估
                        </div>
                        <uni-icons type="closeempty" size="20" class="closeIcon" @click="showBillingDesc"></uni-icons>
                    </div>
                    <div class="tips">
                        费标准会按节假日、恶劣天气表更。<div class="navBtn" @click="goToPage({
                            path:`/generalUser/productSize/productSize`,
                            navType:`push`,
                            params:{
                                type:`view`
                            }
                        })">了解计费规则</div>
                    </div>
                    <div class="billingBox">
                        <div class="bigTitle">
                            <div class="name">
                                基础运费
                            </div>
                            <div class="value">
                                ￥{{totalMoneyDesc.base.total}}
                            </div>
                        </div>
                        <div class="billingList">
                            <div class="it" v-for="(it,i) in totalMoneyDesc.base.list" :key="i">
                                <div class="name">
                                    取件码：{{it.verify_code}}
                                </div>
                                <div class="value">
                                    ￥{{it.moeny}}/件
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="billingBox">
                        <div class="bigTitle">
                            <div class="name">
                                增值服务
                            </div>
                            <div class="value">
                                ￥{{totalMoneyDesc.add.total}}
                            </div>
                        </div>

                        <div class="billingList">
                            <div class="it" v-for="(it,i) in totalMoneyDesc.add.list" :key="i">
                                <div class="name">
                                    取件码：{{it.verify_code}} <div class="tipsBoxSmall">急送</div>
                                </div>
                                <div class="value">
                                    ￥{{it.moeny}}/件
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="billingBox">
                        <div class="bigTitle">
                            <div class="name">
                                其他小费
                            </div>
                            <div class="value">
                                ￥{{totalMoneyDesc.tipsMoney}}
                            </div>
                        </div>
                        <div class="tipsDesc">
                            提示：该费用平台不收取任何费用，全部奖励给跑腿员
                        </div>
                    </div>

                </div>
            </div>

        </uni-popup>

        <uni-popup ref="bottomPopupRef1" type="bottom" class="bottomPopup bottomPopupRef1">
            <div class="costDesc">
                <div class="content">

                    <div class="title">
                        加急代取说明
                    </div>
                    <div class="body" style="padding-bottom: 140rpx;">
                        <div class="boldT">
                            1.服务规则
                        </div>
                        <div class="desc">{{myConfig.myConfig.rush_rule.field_value}} </div>

                        <div class="boldT">
                            2.收费标准
                        </div>
                        <div class="desc">
                            <p v-for="(it,i) in myPackStore.myPackCategories" :key="i">
                                {{myPackStore.packTypeToStr(it.pack_type)}}收费：{{it.add_money}}/件
                            </p>
                        </div>

                        <div class="boldT redColor">
                            3.特殊情况说明
                        </div>

                        <div class="desc redColor">
                            恶劣天气或者特殊时段，我们将适当调整收费标准，请理解！
                        </div>

                    </div>


                </div>


                <div class="footer">
                    <div class="confimBtn" @click="()=>bottomPopupRef1.close()">
                        我同意
                    </div>
                </div>

            </div>
        </uni-popup>


        <uni-popup ref="bottomPopupRef2" type="bottom" class="bottomPopup bottomPopupReward">
            <div class="costDesc">
                <div class="content" style="padding-bottom: 140rpx;">

                    <div class="title">
                        打赏小费
                    </div>

                    <div class="body rewardBody">
                        <div class="item rewardItem" :class="{ active: item._id===formData.base.some_tips._id}"
                            v-for="(item,index) in tipsMoneyStore.myTipsMoney" :key="index"
                            @click="()=>{formData.base.some_tips.cacheMoney=item.money;formData.base.some_tips._id=item._id;}">
                            ￥ {{ item.money }}
                        </div>

                        <div class="lineItem">
                            <uni-easyinput type="number" class="rewardMoneyInput" trim="all" placeholder="其他金额"
                                v-model="formData.base.some_tips.cacheMoney" @focus="()=>formData.base.some_tips={}"
                                :maxlength="3" :styles="{
                                    color: `#f37000`
                                }"></uni-easyinput>
                        </div>

                    </div>
                </div>

                <div class="footer">
                    <div class="confimBtn" @click="checkTipsMoney">
                        确定
                    </div>
                </div>

            </div>
        </uni-popup>


        <uni-popup ref="bottomPopupRef3" background-color="#fff" type="bottom" class="bottomPopup bottomPopupRef3">
            <div class="costDesc">
                <div class="content">
                    <div class="title">
                        <div class="name">
                            预计送达时间
                        </div>
                        <div class="closeBtnBox" @click="()=>bottomPopupRef3.close()">
                            <uni-icons type="closeempty" class="closeBtnIcon" size="24"></uni-icons>
                        </div>
                    </div>

                    <div class="body">
                        <div class="left">
                            <div class="list">
                                <div class="it" v-for="(it,i) in sendTimeStore.mySendTime" :key="i"
                                    :class="{active:formData.base.send_time.html_menus_id===it._id}"
                                    @click="()=>sendTimeBarToggle(it)">
                                    {{it.alias_name}}
                                </div>
                            </div>
                        </div>

                        <div class="right">
                            <div class="list">
                                <div class="it"
                                    :class="{active:it.value===formData.base.send_time.checked.value&&sendTimeRightList.others._id===formData.base.send_time._id&&sendTimeRightList.others._id==formData.base.send_time.html_menus_id}"
                                    v-for="(it,i) in sendTimeRightList.list" :key="i" @click="checkedSendTime(it)">
                                    <div class="name">
                                        <span
                                            v-if="it.alias_text&&sendTimeRightList.others.send_date=='$now'">{{it.alias_text}}</span>
                                        <span v-else>{{it.text}}</span>
                                    </div>
                                    <uni-icons type="checkmarkempty" color="#f00" class="checkmarkempty" size="20">
                                    </uni-icons>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </uni-popup>


        <div class="content">
            <div class="addressInfoBox fffBackAndround">
                <div class="item item1">

                    <div class="iconBackground">
                        <div class="type iconBackground1">
                            取
                        </div>
                    </div>

                    <div class="rightBox rightBox1" @click="showActionSheet">

                        <div class="info">
                            <div class="topInfo">
                                <div class="name" :class="{
                                    fontBold:formData.yizhan._id!=``
                                }">
                                    {{formData.yizhan.name}}
                                </div>
                                <div class="tel">
                                    <!-- 135****1284 -->
                                </div>
                            </div>

                            <div class="desc">
                                {{formData.yizhan.all_desc}}
                            </div>

                        </div>
                        <div class="rightIconBox">
                            <uni-icons type="right" size="20"></uni-icons>
                        </div>

                    </div>

                </div>


                <div class="item item2">

                    <div class="iconBackground">
                        <div class="type iconBackground2">
                            收
                        </div>
                    </div>

                    <div class="rightBox rightBox2" @click="goToPage({
                        path:`/generalUser/address/address`,
                        navType:`push`,
                        params:{
                            type:`select`
                        }
                    })">
                        <div class="info">
                            <div class="topInfo">
                                <div class="name" :class="{
                                    fontBold:formData.get._id!=``
                                }">
                                    {{formData.get.name}}
                                </div>
                                <div class="tel">
                                    {{formData.get.moblie}}
                                </div>
                            </div>

                            <div class="desc">
                                {{formData.get.address}}
                            </div>

                        </div>

                        <div class="rightIconBox">
                            <uni-icons type="right" size="20"></uni-icons>
                        </div>


                    </div>

                </div>

                <div class="userContent">
                    <div class="headTitle">
                        描述您的需求
                    </div>
                    <textarea v-model="formData.user_remark" placeholder-style="color:#999;font-size:24rpx"
                        placeholder="为了更好更快更精准地为您服务，您可以输入本次代取的需求，注意，别输入个人隐私信息！选填" class="myTextarea" />
                </div>


            </div>


            <div class="fffBackAndround infoBox">

                <div class="item" @click="()=>bottomPopupRef3.open()" v-if="sendTimeStore.mySendTime.length>0">
                    <div class="title">
                        <div class="name">
                            预计送达
                        </div>
                    </div>

                    <div class="rightBoxInfo">

                        <div class="value" v-if="formData.base.send_time.checked">
                            <span
                                v-if="formData.base.send_time.checked.alias_text!=null&&formData.base.send_time.send_date==='$now'"
                            >
                                {{formData.base.send_time.alias_first_time}}
                        
                            </span>
                            <span v-else>
                                {{formData.base.send_time.alias_name}}
                                {{formData.base.send_time.checked.text}}
                            </span>
                        </div>

                        <uni-icons type="right" size="20"></uni-icons>

                    </div>


                </div>


                <div class="item" v-if="tipsMoneyStore.myTipsMoney.length>0" @click="setDefaultTipsMoney">
                    <div class="title">
                        <div class="name">
                            骑手打赏
                        </div>
                    </div>

                    <div class="rightBoxInfo">

                        <div class="value">
                            <div>
                                <span class="placeholderStyle"
                                    v-if="formData.base.some_tips.money==''">添加小费小哥送的更快哦</span>
                                <span v-else>￥ {{formData.base.some_tips.money}}</span>
                            </div>
                        </div>

                        <uni-icons type="right" size="20"></uni-icons>

                    </div>


                </div>


                <div class="item">
                    <div class="title">
                        <div class="name">
                            快递手机号
                        </div>
                    </div>

                    <div class="rightBoxInfo">

                        <div class="value">
                            <input v-model="formData.base.connect_phone" class="uni-input" type="number"
                                placeholder="填写购买快递时的手机号"
                                placeholder-style="    font-weight: normal;    color: #9b9b9b;font-size: 26rpx" />
                        </div>

                    </div>


                </div>


            </div>



            <div class="fffBackAndround infoBox" v-for="(it, i) in formData.packs" :key="i">


                <uni-swipe-action show="right" ref="swipeActionRef">
                    <uni-swipe-action-item :right-options="[{
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }]" :disabled="formData.packs.length == 1" @click="menusRemove(i)">

                        <div class="item" @click="goToPage({
                            path:`/generalUser/productSize/productSize`,
                            navType:'push',
                            params:{
                                i
                            }
                        })">
                            <div class="title">
                                <div class="name">
                                    物件大小
                                </div>
                                <div class="tipsBox">
                                    必填
                                </div>
                            </div>

                            <div class="rightBoxInfo">
                                <div class="value">
                                    <div>
                                        <span class="placeholderStyle" v-if="it.pack.id==''">请选择</span>
                                        <span v-else>{{myPackStore.packTypeToStr(it.pack.pack_type)}}</span>
                                    </div>
                                </div>

                                <uni-icons type="right" size="20"></uni-icons>

                            </div>



                        </div>


                        <div class="item">
                            <div class="title">
                                <div class="name">
                                    取件码
                                </div>
                                <div class="tipsBox">
                                    必填
                                </div>
                            </div>
                            <div class="rightBoxInfo">

                                <div class="value">
                                    <input v-model="it.verify_code" class="uni-input" placeholder="请填写你的取件码"
                                        placeholder-style="    font-weight: normal;    color: #9b9b9b;font-size: 26rpx" />
                                </div>

                            </div>

                        </div>


                        <div class="leftBarBox item">
                            <div class="title">
                                <div class="name">
                                    加急代取
                                </div>
                                <div class="tipsBox leftBarBoxWarn">
                                    加急
                                </div>
                            </div>
                            <div class="rightBoxInfo">
                                <div class="doBox">
                                    <switch color="#F37000" @change="needFastStatusChange($event,i)"
                                        style="transform:scale(0.7)" />
                                </div>
                            </div>

                        </div>

                        <div class="addMoreBar item"
                            v-if="i == formData.packs.length - 1 && formData.packs.length < menusMaxCount"
                            @click="addMoreInfoBox">
                            <uni-icons type="plus" size="20" color="#898989" class="plusIcon"></uni-icons> 新增一个栏目 <span
                                class="status">{{ formData.packs.length }}/{{ menusMaxCount }}</span>
                        </div>


                    </uni-swipe-action-item>
                </uni-swipe-action>

            </div>





            <div class="floatUtilBar">

            </div>



        </div>

        <div class="floatBox">
            <div class="bottomShowBox">

                <div class="leftBox">
                    <div class="title">
                        预估总价 <div class="money">￥{{totalMoney}}</div>
                        <div class="viewDescBox" @click="showBillingDesc">
                            明细 <uni-icons type="bottom" size="10" class="toggleIcon"
                                :class="{'animation':showBillingStatus}"></uni-icons>
                        </div>
                    </div>

                    <checkbox-group @change="protocolChange">
                        <div class="protocolBox">
                            <label>
                            <checkbox :checked="protocolStatus" color="#F37000" class="checkbox">
                            </checkbox>
                            阅读并同意 
                        </label>
                        <div class="protocolLink" @click="goToPage({
                                path:`/common/protocol/protocol`,
                                navType:`push`,
                                params:{
                                    title:`跑腿服务协议`
                                }
                            })">《跑腿服务协议》
                            </div>
                        </div>
                    </checkbox-group>

                </div>
                <div class="confimBtn">
                    <div class="btn" @click="confimOrder" :class="{disabledBtn:!orderReady}">
                        下单
                    </div>
                </div>

            </div>


        </div>

    </div>
</template>

<script src="./runErrand.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import '../../public/popup.styl';
@import './runErrand.styl';
</style>
